<template>
    <div >
        <a-carousel arrows>
            <template #prevArrow>
                <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
                    <left-circle-outlined />
                </div>
            </template>
            <template #nextArrow>
                <div class="custom-slick-arrow" style="right: 10px">
                    <right-circle-outlined />
                </div>
            </template>
            <div>
                <h3>1</h3>
            </div>
            <div>
                <h3>2</h3>
            </div>
            <div>
                <h3>3</h3>
            </div>
            <div>
                <h3>4</h3>
            </div>
        </a-carousel>
    </div>
</template>

<script setup lang="ts">
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
import { listApi } from '/@/api/ad';
import { BASE_URL } from "/@/store/constants";
const data = reactive({
    dataList: <any>[],
    queryParam: {
        pageSize: 9999,
        page: 1,
        total: 0,
    },
})
onMounted(() => {
    getDataList()
})
const getDataList = () => {
    listApi(data.queryParam).then((res) => {
        data.dataList = res.data;
        data.queryParam.total = res.total;
        data.dataList.forEach((item: any, index: any) => {
            item.index = index + 1;
            if (item.image) {
                item.imageUrl = BASE_URL + '/api/staticfiles/image/' + item.image
            }
        });
    }).catch((err) => {
        console.log(err);
    });
}
</script>

<style scoped lang="less"></style>